<template>
	<view class="administrator" >
		<view class="administrator-card">
			<uni-card :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx 40rpx'" :padding="0" >
				<uni-forms ref="valiForm" :recruits="rules" :modelValue="valiFormData">
					<uni-forms-item name="reply">
						<uni-easyinput type="textarea" v-model="valiFormData.reply" :clearable="false" :inputBorder="false" placeholder="请输入申诉内容"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item style="display: none;" name="id">
						<uni-easyinput type="textarea" v-model="valiFormData.id" :clearable="false" :inputBorder="false" placeholder="申诉订单id"></uni-easyinput>
					</uni-forms-item>
					
				</uni-forms>
			</uni-card>
		</view>
		<view class="administrator-but">
			<button class="but" plain @click="addClick('valiForm')">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				valiFormData:{
					id:'',
					reply:'',
				},
				// 校验规则
				rules: {
					reply: {
						recruits: [{
							required: true,
							errorMessage: '申诉内容不能为空！'
						}]
					},
					id: {
						recruits: [{
							required: true,
							errorMessage: '提交错误！请返回重新进入申诉！'
						}]
					}
				},
			};
		},
		onLoad(res) {
			this.valiFormData.id = res.id
		},
		methods:{
			/** 添加联系人事件
			 * @param {Object} ref 添加联系人的电话数据
			 */
			async addClick(ref) {
				let _this = this
				try {
					let res = await this.$refs[ref].validate()
					let data = await this.$http.post('/index/Cleanerindex/add_complaint',res)
					// 返回到列表页
					uni.navigateBack({
					    delta: 1
					});
				}catch (err) {
					if(err.length > 0) {
						uni.showToast({
							title: err[0].errorMessage,
							icon:"none"
						})
					} else if (err.statusCode == 1002) {
						uni.showToast({
							title: err.errMsg,
							icon:"none"
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
.administrator {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100vh;
	.input-placeholder {
		font-size: 28rpx;
		color: rgba($color: #000000, $alpha: 0.5);
	}
	.administrator-card {
		flex: 1;
		overflow: auto;
		margin-bottom: 20rpx;
		.uni-card {
			border-radius: 20rpx;
			overflow: visible;
			.uni-card__header {
				padding: 6rpx 0;
			}
			.uni-forms-item__inner {
				padding: 0;
			}
			.label-text {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba($color: #000000, $alpha: 0.7);
			}
			.uni-easyinput__content-input, .uni-combox__input {
				text-align: right;
			}
			.p-input {
				width: 100%;
			}
		}
	}
	.administrator-but {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 80rpx;
		margin-bottom: 40rpx;
		.but {
			flex: 1;
			color: #FFFFFF;
			background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
			border-radius: 40rpx;
			line-height: 80rpx;
			border: 0;
			margin: 0 20rpx;
		}
		.but1 {
			color: #000000;
			background: linear-gradient(-90deg, #ffffff, #ffffff);
		}
	}
}
</style>
